<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width: 30px;height:30px;background: red;border-radius: 50%;text-align: center;line-height: 30px;font-size: 20px;color: #fff;position: absolute;left:0; top:0;display: none;}
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</body>
<script>

  var abox = document.querySelectorAll(".box");

  var i = 0;

  document.onmousemove = function(eve){
    var e = eve || window.event;
    // 根据移动事件执行的次数，依次显示元素
    if(i < abox.length){
      abox[i++].style.display = "block";
    }
    // 先从最后一个元素开始，依次向前找前一个元素的位置
    for(var j=abox.length-1; j>0; j--){
      abox[j].style.left = abox[j-1].offsetLeft + "px";
      abox[j].style.top = abox[j-1].offsetTop + "px";
    }
    // 第一个元素跟随鼠标的位置
    abox[0].style.left = e.pageX + "px";
    abox[0].style.top = e.pageY + "px";
  }

  
</script>
</html>